<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>上传文件</title>
  <link href="../static/css/bootstrap.min.css" rel="stylesheet">
  <link href="../static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="../static/css/style.min.css" rel="stylesheet">
  <link href="../static/css/style.min.css" rel="stylesheet">
  <script src="../static/js/lib/jquery-3.3.1.min.js"></script>
  <script src="../static/js/lib/jquery.url.js"></script>
  <script src="../static/js/ssh.js"></script>
</head>

<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    {{template "block/nav.html" .}}

    {{template "block/header.html" .}}

    <main class="lyear-layout-content">

      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <div class="card">

              <div class="card-header"><h4>上传文件</h4></div>
              <div class="card-body">

                <div class="form-group">
                  <label  for="example-multiple-select">选择主机</label>
                    <select class="form-control" id="selectdata" size="5" multiple>
                      {{range $index, $item := .datas}}
                      <option value="{{$item.Hostname}}">{{$item.Hostname}}</option>
                      {{end}}
                    </select>
                     <div>
                       <div class="form-group">
                         <label for="">目标路径</label>
                         <input class="form-control" type="text" id="filesource" name="filesource" placeholder="请输入目标路径..">
                       </div>

{{/*                       <div class="form-group">*/}}
{{/*                         <label class="col-xs-12" for="example-file-input">上传文件</label>*/}}
{{/*                           <input type="file" id="upload_file" name="upload_file">*/}}
{{/*                       </div>*/}}
                       <form method="POST" action="/file" enctype="multipart/form-data">
                         <input type="file" name="image" id="file_upload">
                         <div id="imgdiv" style="display:none;">
                         </div>
                       </form>
                       <script type="text/javascript">

                         //页面的初始化
                         $(function () {
                           $("#file_upload").uploadify({       //绑定元素
                             'fileObjName':'image',//html input标签的name属性的值吧。
                             'debug':false,
                             'auto':true,    //自动上传
                             'multi':true,
                             'removeCompleted':false, //上传完成以后是否保存进度条
                             'buttonText':'选择文件',
                             'cancelImg':'/static/uploadify/uploadify-cancel.png',
                             'swf':'/static/uploadify/uploadify.swf', //必须设置  swf文件路径
                             'uploader':'/file',         //必须设置，上传文件触发的url
                             'fileTypeDesc':'FileType',
                             'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png;',
                             'multi':true,
                             'onUploadSuccess': function (file, data, response) {
                               $("#imgdiv").show();
                               var html='<image src="/static/uploadfile/'+file.name+'" style="height:150px;width:150px;margin:20px;"/>';
                               $("#imgdiv").append(html);
                             }
                           });

                         });
                       </script>
                  <div class="form-group">
                    <pre class="content" id="alert"></pre>
                  </div>

                  <div class="form-group">
                  <button class="btn btn-primary" type="submit" name="album-upload-button" id="album-upload-button">上传</button>
                  <a class="btn btn-info" href="/file">返回</a>
                  </div>

                </div>
              </div>
              </div>

      </div>

    </main>

  </div>
</div>

<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../static/js/main.min.js"></script>

<!--图表插件-->
<script type="text/javascript" src="../static/js/Chart.js"></script>

</body>
</html>